import { createContext,useContext,useState } from "react"

const Context = createContext(123)

export default function App() {
    const [count, setCount] = useState(1)
    const handleClcik = () => {
        setCount(count + 1)
    }
    return (
        <>
            <h1>ContextComponents</h1>
            <button onClick={handleClcik}>点击</button>
            <Context.Provider value={count}>
                <Child></Child>
            </Context.Provider>
        </>
    )
}

function Child() {
    return (
        <>
            <h1>Child</h1>

            <Son></Son>
        </>
    )
}

function Son() {
    const value = useContext(Context)
    return (
        <>
            <h1>Son</h1>
            <span>{ value}</span>
        </>
    )
}
